<template>
  <div class="allWayBill">
    <van-tabs v-model:active="value" @change="onChange">
      <van-tab
        v-for="item of list"
        :key="item.key"
        :title="item.title"
      ></van-tab>
    </van-tabs>
    <van-list
      ref="vanListRef"
      v-model:loading="loading"
      :finished="finished"
      finished-text="没有更多了"
      @load="onLoad"
    >
      <div class="task-item">
        <div class="title">
          <div class="tit-left">订单编号：13421344576943</div>
          <div class="tit-right">{{ status }}</div>
        </div>
        <div class="text-row">申请人：张晓明</div>
        <div class="text-row">部门：人力资源部门</div>
        <div class="text-row">用车理由：接待客户</div>
        <div v-if="tabType == 0" class="btns">
          <van-space>
            <van-button type="primary" size="small">编辑</van-button>
            <van-button plain size="small" @click="handleCancel">
              撤销
            </van-button>
          </van-space>
        </div>
      </div>
    </van-list>
  </div>
</template>

<script lang="ts" setup>
  import { ref, computed } from 'vue';
  import { useUserStore } from '@/store/index';
  import { showConfirmDialog } from 'vant';

  const userStore = useUserStore();

  const value = ref('');
  const loading = ref(false);
  const finished = ref(true);

  const { userType } = userStore;
  const onLoad = () => {};
  const list = ref([]);
  const tabType = ref('');
  const status = ref('');
  list.value = [
    {
      title: '全部',
      key: 0,
    },
    {
      title: '进行中',
      key: 1,
    },
    {
      title: '已完结',
      key: 2,
    },
  ];

  const onChange = (valuea: any) => {
    tabType.value = valuea;
    if (valuea === 0) {
      status.value = '进行中';
    } else if (valuea === 1) {
      status.value = '进行中';
    } else if (valuea === 2) {
      status.value = '已完结';
    }
  };
  const handleCancel = () => {
    showConfirmDialog({
      title: '撤销',
      message: '确定撤销该申请？',
    })
      .then(() => {
        // on confirm
      })
      .catch(() => {
        // on cancel
      });
  };
</script>

<style lang="less" scoped>
  .allWayBill {
    .task-item {
      margin-top: 20px;
      padding: 20px;
      width: 100%;
      background: #fff;
      .title {
        display: flex;
        justify-content: space-between;
        padding: 12px 0;
        width: 100%;
        color: #999;
        font-size: 12px;
      }

      .text-row {
        margin-bottom: 12px;
        font-size: 12px;
        color: #333;
      }
      .btns {
        text-align: right;
        margin-top: 20px;
      }
    }
  }
</style>
